<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>Remote data operations</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/kendo.common.css" rel="stylesheet"/>
        <link href="../../source/styles/kendo.kendo.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/kendo.core.js"></script>
        <script src="../../source/js/kendo.data.js"></script>
        <script src="../../source/js/kendo.data.odata.js"></script>
        <script src="../../source/js/kendo.popup.js"></script>
        <script src="../../source/js/kendo.list.js"></script>
        <script src="../../source/js/kendo.dropdownlist.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <div class="description">Remote data operations</div>
        <!-- description -->
        <div id="example" class="k-content">


            <div class="configuration">
                <span class="configHead">Configure</span>
                <ul class="options">
                    <li>
                        <label for="page">Page:</label>
                        <input type="number" value="1" id="page" min="1" />
                    </li>
                    <li>
                        <label for="order">Order by:</label>
                        <select id="order" style="width:115px;float:right;">
                            <option value="Id">Id</option>
                            <option value="Name">Name</option>
                            <option value="AverageRating">Average Rating</option>
                            <option value="ReleaseYear">Release Year</option>
                        </select>
                    </li>
                    <li>
                        <label for="dir">Direction:</label>
                        <select id="dir" style="width:115px;float:right;">
                            <option value="asc">Ascending</option>
                            <option value="desc">Descending</option>
                        </select>
                    </li>
                    <li>
                        <button class="k-button" id="apply">Apply</button>
                    </li>
                </ul>
            </div>

            <div id="movies-container" class="k-widget k-header k-menu-vertical">
                <ul id="movies"></ul>
            </div>

            <script id="template" type="text/x-kendo-template">
                <li class="title">
                    # if (BoxArt.LargeUrl) { #
                        <img src="#= BoxArt.LargeUrl #" />
                    # } #
                    <dl>
                        <dt>Name:</dt>
                        <dd>#= Name #</dd>
                        <dt>Average Rating:</dt>
                        <dd>#= AverageRating #</dd>
                    </dl>
                </li>
            </script>

            <script>
                $(document).ready(function() {
                    // create a template using the above definition
                    var template = kendo.template($("#template").html());

                    var dataSource = new kendo.data.DataSource({
                        type: "odata",
                        serverPaging: true,
                        serverSorting: true,
                        pageSize: 10,
                        transport: {
                            read: "http://odata.netflix.com/Catalog/Titles"
                        },
                        change: function() { // subscribe to the CHANGE event of the data source
                            // update the max attribute of the "page" input
                            $("#page").attr("max", this.totalPages());

                            $("#movies").html(kendo.render(template, this.view()));
                        }
                    });

                    // read data from the remote service
                    dataSource.read();

                    $("#apply").live("click", function() {
                        var page = parseInt($("#page").val(), 10);

                        // validate the page - it must be a number within the allowed range
                        if (isNaN(page) || page < 1 || page > dataSource.totalPages()) {
                            alert(kendo.format("Page must be a number between 1 and {0}", dataSource.totalPages()));
                            return;
                        }

                        // query the remote service
                        dataSource.query({
                            page: page,
                            pageSize: 10,
                            sort: {
                                field: $("#order").val(),
                                dir:$("#dir").val()
                            }
                        });
                    });

                    //initialize dropdownlist components
                    $("#order").kendoDropDownList();
                    $("#dir").kendoDropDownList();
                });
            </script>

            <style scoped>
                #movies-container {
                    padding: 10px;
                    overflow: auto;
                    height: 400px;
                    margin: 0 220px 0 0;
                    border-radius: 5px;
                }

                #movies {
                    padding: 0 1%;
                }

                .title {
                    float: left;
                    padding: 1%;
                    width: 47%;
                    list-style-type: none;
                    margin: 0 0 20px;
                    height: 160px;
                    overflow: hidden;
                }

                .title img {
                    float: left;
                    border-radius: 3px;
                    box-shadow: 0 0 5px #ccc;
                }

                .title dl {
                    margin-left: 133px;
                }

                .title dt {
                    font-weight: bold;
                }

                .title dd {
                    padding: 5px 0 10px;
                    margin: 0;
                }
            </style>
        </div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>

